<template>
    <div class="app-container">
      <div class="header">
          <span class="ready-title">待维护项目</span>
          <template v-if="readyList.length>0">
            <el-button type="text"  v-for="t in readyList"  :key="t.index" @click="linkRread(t)" class="ready-item">{{t}}</el-button>
          </template>
          <span v-if="readyList.length==0" class="ready-null">暂无</span>
      </div>
      <el-tabs v-model="activeName" :before-leave="beforeTab" @tab-click="clickTab">
        <el-tab-pane v-for="item in activityList"  :key="item.index"  :label="item.label"  :name="item.name"></el-tab-pane>
        <template  v-if="activeName=='base' && creatSuccess" >
          <OverseasBaseInfo :ruleForm="ruleForm" :isNeedDraftBtn='false' @getIsSave = "getIsSave"/>
        </template>
        <template  v-if="activeName=='picture'">
          <Picture  :communityId="communityId" @updateReadyStatus="getStatusById"  @getIsSave = "getIsSave"/>
        </template>
        <template  v-if="activeName=='video'" >
          <Video :communityId="communityId" @updateReadyStatus="getStatusById" @getIsSave = "getIsSave"/>
        </template>
        <template  v-if="activeName=='activity'" >
          <Activity :communityId="communityId" @updateReadyStatus="getStatusById"/>
        </template>
        <template  v-if="activeName=='house'">
          <House  :communityId="communityId" @updateReadyStatus="getStatusById"/>
        </template>
        <template  v-if="activeName=='sale'" >
          <Sale :communityId="communityId" @getIsSave = "getIsSave"/>
        </template>
      </el-tabs>
    </div>
</template>

<script>
import Editor from '@/components/Editor';
import Picture from './components/picture'
import Video from './components/video'
import Activity from './components/activity'
import Sale from './components/sale'
import House from './components/house'
import OverseasBaseInfo from './components/overseasBaseInfo';
import Clipboard from 'clipboard';
import {
  getCommunityDetail,
  getStatusById
} from '@/api/overseas'


export default {
  name: "informationManage",
  components: { Editor ,Picture,Video,Activity, Sale,House ,OverseasBaseInfo},
  data() {
    return {
      isSave:true,
      creatSuccess: false,
      visiable:{},
      communityId:"",
      ruleForm: {},
      activeName: "base",
      readyList:[],
      activityList:[
        {
          label: "基本信息",
          name: "base",
        },{
            label: "相册",
            name: "picture",
          },
        {
          label: "视频",
          name: "video",
        },
        {
          label: "户型",
          name: "house",
        },
        {
          label: "项目动态",
          name: "activity",
        },
        {
          label: "置业顾问",
          name: "sale",
        }
      ]
    }
  },

  created() {
    this.communityId = this.$route.query.communityId;
    getCommunityDetail(this.communityId).then(res => {
        let baseInfo = res.data;
        this.creatSuccess = true

        /** 后台给的总价是元的单位转换为万元的单位 */
        res.data.minTotalPrice2 = res.data.minTotalPrice && parseInt(res.data.minTotalPrice)/10000;
        res.data.maxTotalPrice2 = res.data.maxTotalPrice && parseInt(res.data.maxTotalPrice)/10000;
        this.ruleForm = {
          ...res.data,
          saveType:"edit"
        }
    })

    // 获取维护状态
    this.getStatusById();
  },

  methods: {
    // 获取当前组件是否保存
    getIsSave(isSave){
      this.isSave = isSave;
      console.log(isSave);
    },
    getStatusById(){
      getStatusById(this.communityId).then(res => {
        let visiable = res.data;
        let visiableLabel = [];
        let dic = [
          {
              key: "picture",
              name: "相册"
          },
          {
              key: "video",
              name: "视频"
          },
          {
              key: "houseType",
              name: "户型"
          },
          {
              key: "dynamic",
              name: "项目动态"
          },
        ]
        dic.map( item => {
          if(visiable[item.key]==0){
            visiableLabel.push(item.name)
          }
        })
        this.readyList = visiableLabel;
        console.log(visiableLabel)
      })
    },
    // 点击切换tab之前判断有没有保存
    beforeTab() {
      if(!this.isSave){
        return this.$confirm('您还未保存当前页面，切换当丢失已编辑的内容，确定要切换吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.isSave = true;
          return true;
        }).catch(() => {
          throw new Error('取消成功！')
        })
      }
    },
    // 点击切换tab
    clickTab(tab,event){

    },
    linkRread(t){
       let activeName = '';
          switch(t){
            case '相册':
              activeName = 'picture';
            break;
            case '视频':
              activeName = 'video';
            break;
            case '户型':
              activeName = 'house';
            break;
            case '项目动态':
              activeName = 'activity';
            break;
          }
      if(!this.isSave){
        return this.$confirm('您还未保存当前页面，切换当丢失已编辑的内容，确定要切换吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.isSave = true;
          this.activeName = activeName;
        }).catch(() => {
          
        })
      }else{
        this.activeName = activeName;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .ready-item {
    display: inline-block;
    margin-left: 20px;
    font-weight: bold;
    font-size:16px;
  }
  .ready-null{
    font-weight: bold;
    font-size:16px;
    line-height:38px;
    margin-left:20px;
  }
  .ready-title {
    color: red;
    line-height: 34px;
    font-size:24px;
  }
  .header {
    margin-bottom: 20px;
  }
</style>
